import React,{useState,useEffect} from "react";
import { Button,message,Modal,Radio,timertype,Input, Checkbox} from "antd";
import "./index.css"
import axios from "axios";
import "../../mock/mock"

export default function Answer() {
    //定时器
    const [timer,setTimer] = useState(null);
    //定时器状态
    const [timertype,setTimertype] = useState(false);
    //多选状态
    // const [timertypes,setTimertypes] = useState(false);
    //查看答案提示框
    const [isModalVisible,setIsModalVisible] = useState(false);
    //获取mock数据答案
    const [statePage,setState] = useState({list:'' ,index:''});
    //分页
    const [pages,setPages] = useState({page:1,pageSize:1});
    //单选题
    const [chose,setChose] = useState(null)
    //多选题
    const [choses,setChoses] = useState(false)
    
    //定义定时器初始值
    const timer_value=()=>{
      axios.post('/api/gett/data').then((res)=>{
             // console.log(res)
             setTimer(res.data.data[0].inter)
           })
         }
    //请求获取时间
    // useEffect(()=>{
    //     setTimer(post_value)
    // },[]);
  
    //设置开启计时器
    const openTimer = ()=>{
      if(timer !== null && timer <1){
        axios.post('/api/gett/data').then((res)=>{
              // console.log(res,'111');
              setIsModalVisible(res.data.data[0].show)
              // console.log(res.data.data[0].show)
        })
      }
    }
    //定义触发开启定时器的条件
    useEffect(()=>{
        let time = null;
        if(timer >0 && timertype){
          time = setInterval(()=>{
            setTimer(timer -1)
            
          },1000)
          // console.log(time,timer )
        };

        //开启定时器
        openTimer();
        return ()=>{
          clearInterval(time);//清除定时器
        }
    },[timer,timertype]);

    // 定义单选状态的改变
    // const onChangeTime =()=>{
    //   setTimertype(!timertype)
    // }
    
    //定义自动获取题目数据
    const click = ()=>{
      
      let params ={
        page:pages.page,
        pageSize:pages.pageSize
      };
      // console.log('params参数', params)
      axios.get('/mock').then((res)=>{
          // console.log(res);
        if(res.data.data.length >= pages.page){
          //发请求获取题目数据
          axios.post('/mock').then((res)=>{
            //获取当前题目答案
            setState({
              //取当前第一个数据
              list:res.data.data[pages.page -1],
              index:res.data.data[pages.page -1].answer, 
            })
            // console.log(res.data,'111');
          })
        }else {
          message.warning('答题结束')
        }
      })
    };
 
    useEffect(()=>{
      //调用获取数据函数
      click();
      // 重新获取定时器初始时间
      setTimer(timer_value)
    },[pages.page]);
    /*const [list, setList]=useState([]);
     useEffect(() => {
         axios.get('/mock').then((res) => {
           setList(res.data.data);
           console.log(res.data.data, 'Ok')
       })
       }, []);*/

    //定义当前选项索引
    const optionIndex = (item,index)=>{
      //  console.log(item,index) 
    };
    
    //启动/暂定计时器
    const startStopTime = () =>{
      // console.log('123')
      setTimertype(!timertype)
    }
    //下一题
    const nextQuestion = ()=>{
      //重置定时器单选状态
      setTimertype(false);
      //下一页
      setPages({
        page:pages.page + 1,
        pageSize:1
      });
      setChose(null);
      click(); //获取下一题
      // console.log(pages.page,'111111')
    }
    //查看答案
    const showAnswer=()=>{
        setIsModalVisible(true)
    };
    //查看答案~确定按钮
    const handleOk =()=>{
      setIsModalVisible(false)
    };
    //查看答案~取消按钮
    const handleCancel=()=>{
      setIsModalVisible(false)
    };

    //单选题选择框
    const onChange = e => {
      // console.log('radio checked', e.target.value);
      setChose(e.target.value);
    };
    return (
        <div className="answer-context">
           {/* {
           list.map((item)=>{
             return ( <div className="answer-timu"  key={item.id}>
              <h1 className="first-timu">题目:{item ?item.problem: ''}
              </h1>
              <span>{item.selects?item.selects[0]: ''}</span>
              <span>{item.selects?item.selects[1]: ''}</span>
              <span>{item.selects?item.selects[2]: ''}</span>
              <span>{item.selects?item.selects[3]: ''}</span>
          </div>)
            })[0]
          }  */}
          {/* 计时器 */}
          <div className="timer" onClick={startStopTime}>
            {timer}
          </div>

          {/* 题目和答案 */}
          <div className="answer-timu">
              <h1 className="'first-timu">题目：{statePage.list.problem}</h1>
              <div className="Single-choice">
                  {/* 单选题 */}
                  <Radio.Group onChange={onChange} value={chose}>
                  { statePage.list && statePage.list.type === '0'
                   && statePage.list.selects.map((item,index)=>{
                      return ( 
                            <p key={index} onClick={optionIndex(item)}>
                              <Radio value={index}> <span>{item}</span> </Radio>
                            </p>
                        )
                    })
                } 
                  </Radio.Group>

                  {/* 多选题 */}
                  <Checkbox.Group style={{width:'100%'}} checked={choses}>
                  { statePage.list && statePage.list.type === '1'
                   && statePage.list.selects.map((item,index)=>{
                      return ( 
                            <p key={index} 
                            onClick={()=>optionIndex(item)}
                            className="answer-timu">
                              <Checkbox value={index}>{item}</Checkbox>
                            </p>
                        )
                    })
                } 
                  </Checkbox.Group>

                  {/* 填空题 */}
                  { statePage.list && statePage.list.type === '2' &&(
                            <p className="answer-ompletion">
                              <Input size="small"></Input>
                            </p>
                    )} 
              </div>
          </div>
          
           {/* 下一题/答案 */}
           <div className="answer-button">
                <Button type="primary"  shape='round' onClick={nextQuestion}>下一题</Button>
                <Button type="primary"  shape='round' onClick={showAnswer}>查看答案</Button>
           </div> 
           <Modal
            title="提示" 
            visible={isModalVisible} 
            onOk={handleOk} 
            onCancel={handleCancel}
            cancelText="取消"
            okText="确定" >
              <p>答案：{statePage.index}</p>
            </Modal>
        </div>
    )
}